<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="seach()"
            >立即创建</el-button
          >
          <el-button type="primary" size="mini" @click="handleSearch()"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top: 1%"
    >
      <el-table-column label="企业" align="center">
        <template slot-scope="scope">
          {{ scope.row.user.name }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.user.name }}
        </template>
      </el-table-column>
      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.user.phone }}
        </template>
      </el-table-column>
      <el-table-column label="车牌号" align="center">
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column>
      <el-table-column label="计费类型" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.cardTypeId == 1" size="mini"
            >贵宾车</el-tag
          >
          <el-tag type="warning" v-if="scope.row.cardTypeId == 2" size="mini"
            >月票车</el-tag
          >
          <el-tag type="primary" v-if="scope.row.cardTypeId == 3" size="mini"
            >储值票车</el-tag
          >
          <el-tag type="danger" v-if="scope.row.cardTypeId == 4" size="mini"
            >临时车</el-tag
          >
          <el-tag type="warning" v-if="scope.row.cardTypeId == 5" size="mini"
            >免费车</el-tag
          >
          <el-tag type="info" v-if="scope.row.cardTypeId == 6" size="mini"
            >时租车</el-tag
          >
          <el-tag type="info" v-if="scope.row.cardTypeId == 6" size="mini"
            >车位池车</el-tag
          >
          <el-tag type="info" v-if="scope.row.cardTypeId == 6" size="mini"
            >公务车</el-tag
          >
          <el-tag type="info" v-if="scope.row.cardTypeId == 6" size="mini"
            >月结车</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="车辆类型" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.carTypeId == 1" size="mini"
            >小型车</el-tag
          >
          <el-tag type="warning" v-if="scope.row.carTypeId == 2" size="mini"
            >摩托车</el-tag
          >
          <el-tag type="primary" v-if="scope.row.carTypeId == 3" size="mini"
            >中型车</el-tag
          >
          <el-tag type="danger" v-if="scope.row.carTypeId == 4" size="mini"
            >大型车</el-tag
          >
          <el-tag type="warning" v-if="scope.row.carTypeId == 5" size="mini"
            >运输车</el-tag
          >
          <el-tag type="info" v-if="scope.row.carTypeId == 6" size="mini"
            >备用车</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.money }}
        </template>
      </el-table-column>

      <el-table-column label="是否折扣" align="center">
        <template slot-scope="scope">
          <el-tag
            type="success"
            v-if="scope.row.isEnterpriseDiscount"
            size="mini"
            >是</el-tag
          >
          <el-tag
            type="danger"
            v-if="!scope.row.isEnterpriseDiscount"
            size="mini"
            >否</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="有效时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.beginDate | formatYmd }}
          {{ scope.row.endDate | formatYmd }}
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.state" size="mini"
            >正常</el-tag
          >
          <el-tag type="danger" v-if="!scope.row.state" size="mini"
            >过期</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.endDate | formatYmd }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="handleLease(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="handleLease(scope.row.id)"
            >缴费</el-button
          >

        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getVehicleList } from "@/api/car";

export default {
  // filters: {
  //   statusFilter(status) {
  //     const statusMap = {
  //       published: "success",
  //       draft: "gray",
  //       deleted: "danger",
  //     };
  //     return statusMap[status];
  //   },
  // },
  filters: {
    formatDate(value) {
      if (value) {
        return moment(value).format("YYYY-MM-DD");
      }
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      where: {
        page: 1,
        page_size: 50,
        data: {
          userName: "",
          number: "",
          payType: "",
          phone: "",
          state: "",
          isEnterpriseDiscount: "",
        },
      },
    };
  },
  created() {
    this.fetchData(this.where);
  },
  methods: {
    handleSearch() {
      this.fetchData(this.where);
    },
    fetchData(obj) {
      this.listLoading = true;
      getVehicleList(obj).then((response) => {
        console.log(response);
        this.listLoading = false;
        this.list = response.data;
      });
    },
    seach() {
      this.fetchData(this.where);
    },
    handleLease() {
      console.log("handleLease");
      this.$router.push({ name: "LeaseRoom" });
    },
  },
};
</script>
